import 'package:flutter/material.dart';
import 'dart:html' as html;

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ThemeMode _mode = ThemeMode.light;
  static const String _kThemeModeKey = 'theme_mode';

  @override
  void initState() {
    super.initState();
    _loadThemeWeb();
  }

  void _loadThemeWeb() {
    final value = html.window.localStorage[_kThemeModeKey];
    if (value != null) {
      setState(() {
        _mode = _parseThemeMode(value);
      });
    }
  }

  void _saveThemeWeb(ThemeMode mode) {
    html.window.localStorage[_kThemeModeKey] = _themeModeToString(mode);
  }

  ThemeMode _parseThemeMode(String v) {
    switch (v) {
      case 'dark':
        return ThemeMode.dark;
      case 'light':
        return ThemeMode.light;
      case 'system':
      default:
        return ThemeMode.system;
    }
  }

  String _themeModeToString(ThemeMode mode) {
    if (mode == ThemeMode.dark) return 'dark';
    if (mode == ThemeMode.light) return 'light';
    return 'system';
  }

  ThemeData _buildLightTheme() {
    final scheme = ColorScheme.fromSeed(
      seedColor: Colors.teal,
      brightness: Brightness.light,
    );
    return ThemeData(
      useMaterial3: true,
      colorScheme: scheme,
      elevatedButtonTheme: ElevatedButtonThemeData(
        style: ElevatedButton.styleFrom(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(12),
          ),
          elevation: 2,
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        ),
      ),
      cardTheme: const CardThemeData(
        elevation: 2,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(12)),
        ),
      ),
      appBarTheme: AppBarTheme(
        backgroundColor: scheme.surface,
        foregroundColor: scheme.onSurface,
        elevation: 0,
      ),
    );
  }

  ThemeData _buildDarkTheme() {
    final scheme = ColorScheme.fromSeed(
      seedColor: Colors.teal,
      brightness: Brightness.dark,
    );
    return ThemeData(
      useMaterial3: true,
      colorScheme: scheme,
      elevatedButtonTheme: ElevatedButtonThemeData(
        style: ElevatedButton.styleFrom(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(12),
          ),
          elevation: 2,
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        ),
      ),
      cardTheme: const CardThemeData(
        elevation: 2,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(12)),
        ),
      ),
      appBarTheme: AppBarTheme(
        backgroundColor: scheme.surface,
        foregroundColor: scheme.onSurface,
        elevation: 0,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '第09课 - 主题与暗黑模式',
      theme: _buildLightTheme(),
      darkTheme: _buildDarkTheme(),
      themeMode: _mode,
      home: Scaffold(
        appBar: AppBar(title: const Text('主题切换')),
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('当前模式: $_mode'),
              const SizedBox(height: 12),
              Wrap(
                spacing: 8,
                children: [
                  ElevatedButton(
                    onPressed: () {
                      setState(() => _mode = ThemeMode.light);
                      _saveThemeWeb(ThemeMode.light);
                    },
                    child: const Text('Light'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      setState(() => _mode = ThemeMode.dark);
                      _saveThemeWeb(ThemeMode.dark);
                    },
                    child: const Text('Dark'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      setState(() => _mode = ThemeMode.system);
                      _saveThemeWeb(ThemeMode.system);
                    },
                    child: const Text('System'),
                  ),
                ],
              ),
              const SizedBox(height: 20),
              Card(
                child: Padding(
                  padding: const EdgeInsets.all(16),
                  child: Column(
                    children: const [
                      Text('卡片示例'),
                      SizedBox(height: 8),
                      Text('不同主题下，背景与文字颜色会自动适配'),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}